<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>06_SVG-窗口和盒子视口</title>
  <!-- 
  在 SVG（可缩放矢量图形）中， viewport  和  viewBox  是两个重要的概念，它们用于控制图形的显示和缩放。
  1. Viewport（视口）
  - 定义：Viewport 是指浏览器窗口中显示 SVG 图形的区域。它是用户与 SVG 图形交互的可见区域。
  - 设置：可以通过 SVG 元素的  width  和  height  属性来设置视口的大小。例如：
  <svg width="500" height="400">
      SVG 内容 
    </svg>
    - 特性：
      - 视口的大小通常与浏览器窗口的大小相关联。
      - 如果 SVG 内容超出视口的范围，超出的部分可能会被裁剪，除非使用  overflow  属性来控制显示方式。
    
    2. viewBox（视图框）
    - 定义：viewBox 是一个坐标系统，定义了 SVG 内容的坐标范围。它允许开发者控制图形的缩放和位置。
    - 设置：通过  viewBox  属性设置，格式为  viewBox="minX minY width height" ，其中：
      -  minX  和  minY  定义了视口的左上角坐标。
      -  width  和  height  定义了视口的宽度和高度。
    
      示例：
    <svg viewBox="0 0 500 400" width="500" height="400">
        SVG 内容 
      </svg>
    - 特性：
      - viewBox 允许 SVG 内容在不同大小的视口中进行缩放，而不会失去比例。
      - 通过设置  preserveAspectRatio  属性，可以控制缩放时的纵横比和对齐方式。
    
    3. Viewport 和 viewBox 的关系
    - 缩放：viewBox 定义了 SVG 内容的坐标范围，而 viewport 定义了实际显示的区域。缩放操作会根据这两个设置来调整图形的显示。
    - 适应性：当 viewport 的大小变化时，viewBox 可以确保图形在不同设备和屏幕尺寸下保持适当的比例和位置。
    
    4. 总结
    在 SVG 中， viewport  和  viewBox  是理解图形显示和缩放的重要概念。 viewport  是用户可见的区域，而  viewBox  则定义了图形的坐标范围和缩放行为。合理使用这两个概念，可以实现灵活的图形展示和良好的用户体验。
  -->
  <style>
    body,
    ul {
      margin: 0;
      padding: 0;
    }

    body {
      background-image: url(../../images/grid.png);
    }

    svg {
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>

<body>

  <h3>01-指定视口的大小(画布的大小)</h3>
  <!-- 
    通过给svg设置 width 和 height 来指定视口的大小(画布的大小)
    下面指定视口的大小为: 300 * 300
   -->
  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="100" height="100"></rect>
  </svg>

  <h3>02-viewport和viewBox有相同的宽高比</h3>
  <p>viewBox定义了一个宽400、高200的坐标系统，viewport则是200x100的显示区域。SVG会将viewBox内的内容缩放以适应viewport。</p>
  <svg width="200" height="100" viewBox="0 0 400 200">
    <circle cx="50" cy="50" r="50"></circle>
  </svg>

  <h3>03-viewport和viewBox有相同的宽高比-指定viewBox最小的x和y</h3>
  <svg width="400" height="400" viewBox="50 50 100 100">
    <circle cx="50" cy="50" r="50"></circle>
  </svg>

  <h3>04-viewport和viewBox不同的宽高比</h3>
  <!-- 
    当 viewport 和 viewBox 的宽高比不同时，图形会被拉伸或压缩以适应 viewport。
    preserveAspectRatio: xMinYMin 表示，当图形的宽高比与 viewport 的宽高比不同时，图形会被拉伸或压缩以适应 viewport，同时保持图形的左上角与 viewport 的左上角对齐。
  -->
  <svg width="400" height="400" viewBox="0 0 200 100" preserveAspectRatio="xMinYMin">
    <circle cx="50" cy="50" r="50"></circle>
  </svg>


</body>

</html>